import Vue from "vue";
import Vuex from "vuex";
import {currentUser} from "@/api/login";
import {getMenus} from "@/api/login";
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    /**
     * 2020/8/22 17:20 全局布局配置
     * 注意：其它属性布局为 `fashion` 才生效，
     * 此配置不可删除，否则页面可能出现未知异常。
     */
    layoutConfig: {
      isBreadcrumb: true, // 是否开启 Breadcrumb
      isTagsView: true, // 是否开启 Tags-View
      isFixedHead: false, // 是否固定 Header
      isLogo: false, // 是否侧边栏 Logo
      isCollapse: false, // 是否折叠导航菜单
      isUniqueOpened: false, // 是否只保持一个子菜单的展开
      isUserPhoto: true, // 是否显示登录用户头像
      layout: "fashion", // 切换布局：1、 classic 经典布局 2、 fashion 时尚布局 3、 elegant 典雅布局 4、 strange 怪异布局
      layoutLoading: false, // 切换布局时的 loading
      loadingTimer: 700, // 切换布局时的 loading 时间
      subMenuTheme: 'dark', // 菜单主题颜色 1、 dark 暗色  2、 light 亮色
      isSplitMenu: false, // 自动菜单分割(仅 classic 经典布局生效)
    },
    menus: [], // 后端返回动态路由，处理了 `component` 路径、`hidden` 字段
    originalMenus: [], // 后端返回未处理过的动态路由, `breadcrumb 面包屑中使用`，防止路由缓存时，menuData 变化，originalMenuData也跟着变化。
    // 路由缓存数据，字符串为组件中的 `name` 值，想要缓存嵌套路由，得先在当前组件中定义 `name` 值
    keepAliveList: ['home', 'docs', 'menu2', 'menu11', 'menu122', 'basicForm'],
    userInfo:{}
  },
  mutations: {
    // 触发 layoutConfig 配置更新
    getLayoutConfig(state, res) {
      state.layoutConfig = res;
    },
    // 后端返回动态路由
    setMenus(state, res) {
      state.originalMenus = JSON.parse(JSON.stringify(res));
      state.menus = filterMenu(res);
    },
    emptyMenu(state){
      return state.menus=[]
    },
    setUserInfo(state,res){
      state.userInfo=res
    },
    emptyUserInfo(state){
      state.userInfo={}
    },
    getMenus(state){
      return filterMenu(state.menus)
    }
  },
  actions: {
    // 触发 layoutConfig 配置更新
    setLayoutConfig({commit}, res) {
      commit("getLayoutConfig", res);
    },
    //生成用户信息
    genUserInfo({commit}){
      return new Promise((resolve,reject) =>{
        currentUser().then(res =>{
          let data = res.data;
          commit("setUserInfo", data);
          resolve(data)
        }).catch(error =>{
          reject(error)
        })
      })
    },
    clearUserInfo({commit}){
      commit('emptyUserInfo')
    },
    genMenus({commit}){
      return new Promise((resolve, reject) => {
        getMenus().then(res =>{
          let menus = res.data;
          commit('setMenus',menus)
          return resolve(menus)
        }).catch( err=>{
              reject(err)
        })
      })
    }
  },
  modules: {},
});
// 递归过滤 `hidden` 为 false 的组件
function filterMenu(arr) {
  // console.log("准备过滤菜单",arr)
  return arr
      .filter((item) => !(item.hidden)) //被隐藏的不生成菜单，只生成路由
      .filter(item => item.type===1)   //按钮不显示成菜单，按钮如查询、修改、删除等接口
      .map((item) => {
        //item["title"] = item.meta.title;
        // 拷贝 到新的对象中，免得有引用
        item = Object.assign({}, item);
        if (!item.meta){
          item.meta={}
        }
        if (item.children) {
          item.children = filterMenu(item.children)
        }
        return item;
      });
}